
<template>
    <div id="tmpl" style="margin-top: 40px">
        <!-- 1.0 轮播图：mint-ui中的swipe -->
        <mt-swipe :auto="4000">
            <!-- <mt-swipe-item></mt-swipe-item> -->
            <mt-swipe-item v-for="item in list" :key="item.img">
                <img :src="item.img" >
            </mt-swipe-item>
        </mt-swipe>

        <!-- 2.0 mui中的九宫格 -->
        <div class="mui-content">

		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
                            <div class="mui-media-body">新闻资讯</div>
                        </router-link>
                    </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-email"></span>
                            <div class="mui-media-body">产品展示</div>
                        </router-link>
                    </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/goods/goodslist">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">商品购买</div>
                        </router-link>
                    </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/feedback">
		                    <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">留言反馈</div>
                        </router-link>
                    </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/video">
		                    <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">视频专区</div>
                        </router-link>
                    </li>
                    
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/callme">
		                    <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">联系我们</div>
                        </router-link>
                    </li>
		        </ul> 
		</div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../kits/common.js';
export default {
    data(){
            return {
                list:[]
            }
    },
    created(){
        //在当前页面data和methods对象都创建完毕，才会自动调用
        this.getimgs();
    },
    methods:{
        //在此函数里 发出轮播图的ajax请求
        getimgs(){
            //1.0 确定url
            var url = common.apiurl + '/api/luobotu.php';
            //2.0 调用$http.get请求
            this.$http.get(url).then(function(response){
                  var data = response.body
                  //错误处理
                  if(data.status != 0){
                        Toast(data.message);
                        return;
                  }
                  //如果服务器返回的数据正常，则赋给list
                  this.list = data.message
            })
        }
    }
    
}
</script>

<style scoped>
    .mint-swipe{
        height: 300px;
    }
    .mint-swipe-item{
        background-color:red;
        height: 300px;
        width:100%;
    }
    .mint-swipe-item img{
        height: 300px;
        width:100%;
    }

    .mui-content{
        background-color:#fff;
    }
    .mui-grid-view.mui-grid-9{
        background-color:#fff;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right: 0px; 
        border-bottom: 0px; 
    }
    .mui-grid-view.mui-grid-9{
        border-top: 0px;
        border-left: 0px;
    }
    .mui-icon:before{
        content:'';
        height:50px;
        width: 50px;
        display: inline-block;
        background-repeat: round;
    }
    .mui-icon-home:before{
        background-image: url('../../statics/images/1.png');
    }
    .mui-icon-email:before{
        background-image: url('../../statics/images/2.png');
    }
    .mui-icon-chatbubble:before{
        background-image: url('../../statics/images/3.png');
    }
    .mui-icon-location:before{
        background-image: url('../../statics/images/4.png');
    }
    .mui-icon-search:before{
        background-image: url('../../statics/images/5.png');
    }
    .mui-icon-phone:before{
        background-image: url('../../statics/images/6.png');
    }
</style>